// 问题：多个then()方法的时候，只有最后一个then()的回调函数能有效
//      - 原因：最后调用then()时，后面添加的业务注册的回调函数会覆盖上一个注册的回调函数
//          当多次调用了then()时，如何让then()里面的回调函数都能有效执行呢？

// 解决：将原来的单个回调属性修改为数组属性，让每一个注册的回调函数都得以保存
//      1. 添加回调函数数组 onFulfilledCallbacks、onRejectedCallbacks
//      2. 将注册的回调函数进行缓存，缓存至 onFulfilledCallbacks 和 onRejectedCallbacks 中
//      3. 当resolve或reject的时候， 再执行缓存的回调函数数组中的每一个 onFulfilledCallback 或 onRejectedCallback

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

/**
 *
 *
 * @class MyPromise
 */
class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    status = PENDING

    value = null
    reason = null

    // 1. 添加回调函数数组 onFulfilledCallbacks、onRejectedCallbacks
    // onFulfilledCallback = null
    onFulfilledCallbacks = []

    // onRejectedCallback = null
    onRejectedCallbacks = []

    resolve = (value) => {
        if (this.status === PENDING) {
            this.status = FULFILLED
            this.value = value
            // this.onFulfilledCallback && this.onFulfilledCallback(this.value)
            // 3. 循环执行缓存的回调函数数组中的每一个 onFulfilledCallback 或 onRejectedCallback
            while(this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value)
            }
        }
    }
    reject = (reason) => {
        if (this.status === PENDING) {
            this.status = REJECTED
            this.reason = reason
            // this.onRejectedCallback && this.onRejectedCallback(this.reason)
            // 3. 循环执行缓存的回调函数数组中的每一个 onFulfilledCallback 或 onRejectedCallback
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason)
            }
        }
    }

    then = (onFulfilled, onRejected) => {
        if (this.status === FULFILLED) {
            onFulfilled(this.value)
        }
        else if (this.status === REJECTED) {
            onRejected(this.reason)
        } 
        else {
            // 2. 将注册的回调函数进行缓存，缓存至 onFulfilledCallbacks 和 onRejectedCallbacks 中
            // this.onFulfilledCallback = onFulfilled
            this.onFulfilledCallbacks.push(onFulfilled)

            // this.onRejectedCallback = onRejected
            this.onRejectedCallbacks.push(onRejected)
        }
    }
}

console.log(`--------------- 调用多次then() ------------------`)
const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(`resolve: success`)
        // reject(`reject: err`)
    }, 0);
})
promise.then((value) => {
    console.log(value + ` --- 我是第1个then()`)
},
(reason) => {
    console.log(reason + ` --- 我是第1个then()`)
})

promise.then((value) => {
    console.log(value + ` --- 我是第2个then()`)
},
(reason) => {
    console.log(reason + ` --- 我是第2个then()`)
})

promise.then((value) => {
    console.log(value + ` --- 我是第3个then()`)
},
(reason) => {
    console.log(reason + ` --- 我是第3个then()`)
})

// 至此，完成了Promise的基本功能，以及它处理异步逻辑的能力
// ES的 Promise 有 then().then()的方式，也就是Promise的 then() 方法应该支持链式调用
const promise1 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(`promise1 resolve: success`)
    }, 0);
})
promise1.then(value => {
    console.log(value)
},
reason => {
    console.log(reason)
}).then(value => {
    console.log(value)
},
reason => {
    console.log(reason)
})

// 问题：第二个 then() 报错
// 报错信息：Cannot read properties of undefined (reading 'then')
// 因为现在的MyPromise还并不支持链式调用的能力